iT邦幫忙

2025 iThome 鐵人賽

DAY 3
0
自我挑戰組

《轉職學習日記:JavaScript × Node.js × TypeScript × Docker × AWS ECS》系列 第 3

Day3 - 持續成長學習藍圖 - JavaScript (物件、陣列操作)

  • 分享至 

  • xImage
  •  

昨天(Day 1)我用一個簡單的數字陣列 [80, 95, 60],自己寫迴圈算平均值和最高分。
那算是基本功練習,今天繼續往下學,接觸到 物件 跟 陣列操作方法。


物件屬性存取

物件可以想像成一張「學生資料卡」,裡面放著名字、分數這些屬性。

let student = {
  name: "小明",
  score: 80
};

// 點記法
console.log(student.name);   // "小明"

// 方括號記法
let key = "score";
console.log(student[key]);   // 80

我發現:點記法最常用,方括號則適合在屬性名稱是變數或特殊字元時使用。


陣列操作方法

昨天我用 for 迴圈來累加、找最大值,程式雖然能跑,但看起來有點笨重。
今天學到陣列內建的方法,可以讓程式更簡潔:

let scores = [60, 75, 90];

// forEach:逐一處理
scores.forEach(s => console.log("分數:", s));

// map:轉換成新陣列
let doubled = scores.map(s => s * 2);
console.log(doubled); // [120, 150, 180]

// filter:篩選符合條件的元素
let passed = scores.filter(s => s >= 60);
console.log(passed); // [60, 75, 90]

// reduce:累積運算
let sum = scores.reduce((acc, s) => acc + s, 0);
console.log(sum); // 225

這些方法一開始看起來有點陌生,但實際用過後,真的比自己寫迴圈清楚很多。


深淺拷貝觀念

物件和陣列在複製時要小心。
直接賦值只是「共用同一份資料」,修改其中一個會影響到另一個。

let arr1 = [1, 2, { score: 90 }];
let arr2 = arr1; // 指向同一份

arr2[2].score = 100;
console.log(arr1[2].score); // 100 → 一起被改掉

這才知道為什麼有「淺拷貝」跟「深拷貝」的差別:

  • 淺拷貝:只複製最外層
  • 深拷貝:連裡面的資料也會複製

實作練習:學生名單處理

今天挑戰一個小任務,用一組學生名單來做練習:

let students = [
  { name: "小明", score: 80 },
  { name: "小美", score: 55 },
  { name: "阿土", score: 90 },
  { name: "阿花", score: 40 }
];

// 1. 篩選及格的學生
let passedNames = students
  .filter(s => s.score >= 60)
  .map(s => s.name);
console.log("及格學生名單:", passedNames);
// ["小明", "阿土"]

// 2. 計算平均分數
let total = students.reduce((acc, s) => acc + s.score, 0);
let average = total / students.length;
console.log("平均分數:", average);
// 66.25

// 3. 找出最高分的學生
let topStudent = students.reduce((max, s) => (s.score > max.score ? s : max));
console.log("最高分學生:", topStudent.name);
// "阿土"

// 4. 排行榜
let ranking = [...students].sort((a, b) => b.score - a.score);
console.log("成績排行榜:", ranking.map(s => `${s.name} (${s.score})`));
// ["阿土 (90)", "小明 (80)", "小美 (55)", "阿花 (40)"]

這裡剛好用到了今天學的 filter、map、reduce 和 sort,感覺就像一整套工具箱派上用場。


🎯 學習心得 / 今日收穫

昨天用迴圈做資料處理時,覺得程式碼寫起來有點「重複又囉嗦」。
今天學到的這些方法,讓我能更快完成一樣的事情:

filter ➡ 幫我挑出及格的學生

map ➡ 把名字清單整理出來

reduce ➡ 算平均、找最高分

sort ➡ 排出成績榜

這樣寫程式的感覺更清楚、更直觀。
對我這個初學者來說,最大的收穫是:

不要什麼都靠迴圈,其實陣列本身就有很多好用的方法。

明天 Day 3 要學 ES6 的語法(解構、展開、模板字串),希望能讓程式碼更簡潔。


上一篇
Day2 - 持續成長學習藍圖 - JavaScript (變數、型別、運算子、函式)
系列文
《轉職學習日記:JavaScript × Node.js × TypeScript × Docker × AWS ECS》3
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言